<template>
    <view class="index">
        <view class="custom" :style="'top:' + customTop + 'px'">
            <text>恩多信息</text>
        </view>
        <view class="main">
            <!--            <view  class="header" :style="'padding-top:' + titleHeight + 'px'">
                            <view @click="search" class="search-box">
                                <text>请输入关键字搜索</text>
                                <text class="search-icon">搜索</text>
                            </view>
                        </view>-->

            <view class="header" :style="'padding-top:' + titleHeight + 'px'">
                <view class="search-box">
                    <input v-model="queryObj.bt" placeholder="搜索" style="width: 70%" @confirm="search" />
                    <u-icon name="close-circle" v-if="queryObj.bt" @click="clear"></u-icon>
                    <!--                    <text class="search-icon" @click="updateData">搜索</text>-->
                    <text class="search-icon" @click="search">搜索</text>
                </view>
            </view>
            <view class="m_b_20">
            <u-swiper :list="banner" indicator :height="bannerHeight"  imgMode="heightFix" radius="0" indicatorActiveColor="#47C156" indicatorInactiveColor="#dddddd"></u-swiper>
            </view>
            <u-grid  :border="false" col="4">
                <u-grid-item @click="handlerToInfo(item.remark)" v-for="(item,index) in indexType" :key="index">
                    <image :src="item.url" style="width: 80rpx;height: 80rpx;"></image>
                    <text class="grid-text">{{item.configName}}</text>
                </u-grid-item>
<!--                <u-grid-item @click="handlerToPeople(listIndex,listItem)">
                    <image src="@/static/img/zrc.png" style="width: 80rpx;height: 80rpx;"></image>
                    <text class="grid-text">找人才</text>
                </u-grid-item>
                <u-grid-item @click="handlerToPeople(listIndex,listItem)">
                    <image src="@/static/img/zrc.png" style="width: 80rpx;height: 80rpx;"></image>
                    <text class="grid-text">找兼职</text>
                </u-grid-item>-->
                <u-grid-item>
<!--                    <image src="@/static/img/kf.png" style="width: 80rpx;height: 80rpx;"></image>-->
<!--                    <text class="grid-text">客服</text>-->
                    <button
                        open-type="contact"
                    >
                        <view class="dis_f_co_c_c">
                        <image src="@/static/img/kf.png" style="width: 80rpx;height: 80rpx;"></image>
                       <view  class="grid-text"> 客服</view>
                        </view>
                    </button>
                </u-grid-item>
            </u-grid>
<!--            <view class="m_t_10 m_b_10">
                <u-notice-bar :text="notice"></u-notice-bar>
            </view>-->
            <view class="dis_f_sb_c m_b_10">
                <view class="card_box p_10 dis_f_sb_c" style="width: 43%;background: #82bfff;" @click="handlerToMine">
                    <view>
                        <view>上传简历</view>
                        <view class="f_s_12 m_t_10">海量职位惹您挑选</view>
                    </view>
                    <image :src="hireLogo[1].url" style="width: 100rpx;height: 100rpx;"></image>
                </view>

                <view class="card_box p_10 dis_f_sb_c" style="width: 43%;" @click="handlerToSend">
                    <view>
                        <view>发布职位</view>
                        <view class="f_s_12 m_t_10">收简历招精英人才</view>
                    </view>
                    <image :src="hireLogo[0].url" style="width: 100rpx;height: 100rpx;"></image>
                </view>
            </view>
<!--    群        -->
            <view v-if="groupData.configName" class="jlq_box dis_f_sb_c p_10 m_t_20 m_b_20" @click="handlerToGroup">
                <view class="dis_f_l_c">
                    <image :src="groupData.url" style="width: 100rpx;height: 100rpx;"></image>
                    <view class="m_l_5">
                        <view class="f_s_20 f_w_b">{{groupData.configName}}</view>
                        <view class="f_s_14 m_t_5" style="color:#5FB7EB;">{{groupData.remark}}</view>
                    </view>
                </view>
                <u-icon name="arrow-right"></u-icon>
            </view>
            <!-- 分类 -->
<!--            <u-grid  :border="false" col="4">
                <u-grid-item v-for="(listItem,listIndex) in typeList" :key="listIndex" @click="handlerType(listIndex,listItem)">
                    <u-icon :customStyle="{paddingTop:10+'rpx'}" :name="listItem.url" :size="40"></u-icon>
                    <text class="grid-text">{{listItem.configName}}</text>
                </u-grid-item>
            </u-grid>-->

            <u-tabs :list="typeList" keyName="configName"  @click="handleToJob"></u-tabs>
<!--            <view class="m_t_20 m_b_20">
                <u-subsection :list="subsectionList" :current="current" activeColor="#E1BC6D" mode="button" @change="sectionChange"></u-subsection>
            </view>-->
<!--            <view class="dis_f_l_c m_t_10">-->
<!--                <u-tabs :list="tabsList"></u-tabs>-->
<!--            </view>-->
<!--            <view class="dis_f_r_c">
                <view class="m_r_10">
                    <uni-data-picker v-model="queryObj.districts" :localdata="areaList" placeholder="请选择地区" popup-title="请选择地区" @change="onchange"  ></uni-data-picker>
                </view>
                &lt;!&ndash;                <uni-data-picker v-model="queryObj.lxNameEj"  :localdata="pickerTypeList" placeholder="请选择分类" popup-title="请选择分类" @change="onTypeChange"  ></uni-data-picker>&ndash;&gt;
            </view>-->
        </view>
        <view v-if="list.length>0">
            <s-enterprise :goodsList="list" @updateData="updateData"></s-enterprise>
<!--            <s-goods :goodsList="list"></s-goods>-->
        </view>
        <s-empty v-else/>
        <view class="wrap">
            <u-back-top :scroll-top="scrollTop"></u-back-top>
        </view>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>

<script>
import {imgUrl} from "@/sheep/request/baseUrl"
import {getInformationListApi,getByKeyApi,getAreaListApi,getAddressApi } from "@/sheep/api/index";
import {myMixins} from "@/mixins/myMixins";
import { bindAgentId } from "@/sheep/utils/common";
import { mapMutations } from "vuex";
export default {
    mixins:[myMixins],
    data() {
        return {
            banner: [],
            bannerHeight: 160,
            pickerTypeList:[],
            isShowPrice:false,
            myInfoVo:{},
            timer: null,
            titleHeight: 0,
            customTop: 0,
            scrollTop: 0,
            unSign: false,
            typeList: [],
            typeTwoLevelList:[],
            currentIndex: 0,
            currentTowLevelIndex:0,
            windowHeight: uni.getSystemInfoSync().windowHeight,
            queryObj:{
                bt:'',
                px:'最新'
            },
            list:[],
            subsectionList:['招聘','求职'],
            current:0,
            curNow:'',
            notice:'',
            tabsList:[{name: '最新'}],
            items: [],
            hireLogo:[],
            areaList:[],
            phone:'',
            groupData:{},
            indexType:[]
        };
    },
    async onLoad(options) {
        if (options.scene) {
            //绑定邀请人id
            this.setBindAgentId(options.scene);
            bindAgentId();
        }
        this.getHeight();
        this.getBannerList();
        this.getBannerHeight();
        this.getPhone();
        this.getLogo();
        this.getindexType();
    },
    onReady() {},
    onShow(options) {
        this.getNoticeList()
        this.updateData()
        this.getArea()
        this.getTypeList();
        this.getGroup();
        // this.handleMap()
    },
    methods: {
        ...mapMutations({
            setBindAgentId: "user/setBindAgentId",
        }),
        handlerToInfo(remark){
            if (remark=='人才'){
                uni.switchTab({
                    url: '/pages/peopleList/index'
                })
            }else if (remark=='职位'){
                uni.switchTab({
                    url: '/pages/job/index'
                })
            }else if (remark=='兼职'){
                const app = getApp();
                app.globalData.lxNameYj = '兼职';
                uni.switchTab({
                    url: '/pages/job/index'
                })
            }
        },
        async getGroup() {
            let res = await getByKeyApi("group");
            this.groupData = res.data?.[0];
        },
        async getindexType() {
            let res = await getByKeyApi("index_type");
            this.indexType = res.data;
        },
        async getLogo() {
            let res = await getByKeyApi("hire_logo");
            this.hireLogo = res.data;
        },
        getArea(){
            getAreaListApi().then(res=>{
                this.areaList = this.filterAreaName(res.data)
            })
        },
        getList(){
            console.log("this.queryObj", this.queryObj);
            this.queryObj.type=this.current+1
            getInformationListApi(this.queryObj).then(res=>{
                this.list = this.list.concat(res.rows)
                this.total = res.total
                if (this.queryObj.pageNum*this.queryObj.pageSize<this.total){
                    this.status = 'loadmore'
                }else{
                    this.status = 'nomore'
                }
                uni.stopPullDownRefresh()
            })
        },
        async getBannerList() {
            let res = await getByKeyApi("swiper");
            this.banner = res.data;
        },
        async getBannerHeight() {
            let res = await getByKeyApi("swiper_height");
            this.bannerHeight = res.data[0]?.configValue;
        },
        async getPhone() {
            let res = await getByKeyApi("phone");
            this.phone = res.data[0]?.configValue;
        },
        handlerToSend(){
            //跳转tabbar
            uni.switchTab({
                url: "/pages/send/index",
            });
        },
        handlerToMine(){
         uni.navigateTo({
             url: "/pages/uploadPdf/index",
         })
        },
        handlerToJob(){
            //跳转tabbar
            uni.switchTab({
                url: "/pages/job/index",
            });
        },
        handlerToPeople(){
            //跳转tabbar
            uni.switchTab({
                url: "/pages/peopleList/index",
            });
        },
        handleToTel(){
            uni.makePhoneCall({
                phoneNumber: this.phone
            })
        },
        sectionChange(index) {
            console.log("index", index);
            this.curNow = index;
            this.current = index;
            this.updateData()
        },

        // 选择收货地址
        handleMap() {
            let that = this;
            // uni.showLoading({ title: "获取位置中" });
            uni.getLocation({
                type: "gcj02", //返回可以用于uni.openLocation的经纬度
                success: function (res) {
                    const latitude = res.latitude;
                    const longitude = res.longitude;
                    getAddressApi({ location: latitude + "," + longitude }).then((res) => {
                            that.latitude = latitude;
                            that.longitude = longitude;
                            that.queryObj.lat=latitude
                            that.queryObj.lot=longitude
                            //存localstorage
                            uni.setStorageSync('latitude',latitude)
                            uni.setStorageSync('longitude',longitude)
                            // uni.hideLoading();
                        }
                    );
                },
                fail: function (err) {
                    // uni.hideLoading();
                    uni.showToast({
                        title: "获取位置失败",
                        icon: "none"
                    });
                }
            });
        },

        async getNoticeList() {
            let res = await getByKeyApi("notice");
            res.data.forEach((element) => {
                this.notice += element.configValue + "                     ";
            });
        },
        //分类
        handleType(e){
            this.currentTowLevelIndex=0
            this.queryObj.lxNameYj=e.configName
            if (e.remark){
                let nameList = e.remark.split('-')
                this.typeTwoLevelList = nameList.map(item=>{
                    return {
                        configName:item
                    }
                })
                this.queryObj.lxNameEj=this.typeTwoLevelList[0].configName
            }else{
                this.typeTwoLevelList=[]

                this.queryObj.lxNameEj = ''
            }
            this.updateData()
        },
        handleTypeTwo(e){
            this.currentTowLevelIndex=e.index
            this.queryObj.lxNameEj = e.configName
            this.updateData()
        },
        handleTab(item){
            this.queryObj.px=item.name
            // if (item.index==1){
            //     this.queryObj.lat=this.latitude
            //     this.queryObj.lot=this.longitude
            // }else{
            //     this.queryObj.lat=''
            //     this.queryObj.lot=''
            // }
            this.updateData()
        },
        handleToInfo(item){
            uni.navigateTo({
                url: '/pages/index/info'
            })
        },
        updateData(data){
            this.queryObj.pageNum = 1
            this.total = 0
            this.status = 'loadmore'
            this.list = []
            this.getList()
        },

        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + res.height + 16;
            this.customTop = res.top + 3;
        },
        clear() {
            this.queryObj.bt = "";
            this.updateData()
        },
        search() {
            uni.navigateTo({
                url: "/pages/index/search",
            });
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        handleToJob(e){
            this.queryObj.lxNameEj=e.configName=='全部'?'':e.configName
            this.updateData()
            /*         uni.switchTab({
                         url: "/pages/job/index",
                     })*/
        },
        handlerToGroup(){
            uni.navigateTo({
                url: "/pages/index/group",
            })
        },
        handlerType(listIndex,listItem) {
            console.log("listItem", listItem);
            // uni.navigateTo({
            //     url: "/pages/classList/index?type=" + listIndex+'&current='+this.current,
            // });
            uni.navigateTo({
                url: "/pages/classList/index?remark=" + listItem.remark+'&current='+this.current,
            });
        },
        async getTypeList() {
            let res = await getByKeyApi("goods_type");
            this.typeList = res.data
            //第一个push全部
            this.typeList.unshift({
                configName: '全部',
                remark: '',
            })
/*            this.typeList = res.data.map(item => {
                return {
                    name: item.configName,
                    remark: item.remark,
                    index: item.id
                }
});*/
            // if (res.data.length>0){
            //     this.handleType(res.data[0])
            // }
        },
        onTypeChange(e){
            const value = e.detail.value
            console.log("value", value);
            if (value.length>0){
                this.queryObj.lxNameEj = value[1].text
            }else{
                this.queryObj.lxNameEj = ''
            }
            this.updateData()
        },
        onchange(e) {
            console.log("e", e.detail.value);
            const value = e.detail.value
            if (value.length>0){
                this.queryObj.province= value[0].text
                this.queryObj.city= value[1].text
                this.queryObj.districts= value[2].text
            }else{
                this.queryObj.province = ''
                this.queryObj.city = ''
                this.queryObj.districts = ''
            }
            this.updateData()
        },
        filterAreaName(data){
            // if(!(data?.length <= 0)){
            // 等价于
            if(!data || data.length <= 0){ // 递归的出口
                return null;
            }
            return data.map(x => { // 循环数据
                const model = { // 把后端返回过来的数据里面的键给替换成我想要的键
                    children: x.children,
                    text: x.name,
                    value: x.areaCode,
                };
                const children = this.filterAreaName(x.children); // 子级数据

                if(children){ // 一直往下循环查找有没有children这个键，如果有就直接添加一个子级字段名，这个字段名就是存子级数据
                    model.children = children;
                }
                return model; // 返回这个数据
            })
        },
    },
};
</script>

<style lang="scss" scoped>
button::after{
    border: unset!important;

}
button{
    background-color: unset!important;
}
.jlq_box{
    //背景渐变
    background: linear-gradient(to right, #E7D4FF, #CFEFFE);
    border-radius: 10rpx;
}
.card_box{
    color: #fff;
    background-color: #fdce8f;
}
.index {
    .custom {
        position: absolute;
        left: 30rpx;
        font-size: 40rpx;
        font-weight: bolder;
    }
    .main {
        padding: 0 30rpx;
        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/indexbg.png")
                no-repeat;
                background-size: 100% auto;
                z-index: -2;
            }
            .search-box {
                // background-color: #fff;
                border: #000 1rpx solid;
                border-radius: 40rpx;
                width: 100%;
                height: 70rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 5rpx 0 30rpx;
                color: #999;
                font-size: 26rpx;
                .search-icon {
                    background-color: #000;
                    border-radius: 40rpx;
                    color: #fff;
                    height: 60rpx;
                    width: 120rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .view {
            position: relative;
            .view-son {
                position: absolute;
                bottom: -5%;
                z-index: -1;
            }
        }
        .grid-text {
            font-size: 12px;
            color: #333;
            padding: 10rpx 0 20rpx 0rpx;
            box-sizing: border-box;
        }
        .goods-box {
            background: #af5858;
            height: 25px;
            border-radius: 4px;
        }
    }
    //瀑布流
    .load-txt {
        padding: 0 0 20rpx 0;
        text-align: center;
        color: #999;
        font-size: 24rpx;
    }
    .load-icon {
        width: 300rpx;
        height: 300rpx;
        margin: 0 auto 20rpx auto;
        display: block;
    }
}
</style>
